<!--
  功能：网卡绑定弹窗
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2023年08月12日 22:27:07
-->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="网卡绑定" width="500px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span: 6 }" :wrapper-col="{span: 14}">
      <a-form-item label="模式" v-bind="validateInfos.mode">
        <a-select v-model:value="modelRef.mode" placeholder="请选择模式">
          <a-select-option :value="item" v-for="item in  modeList">{{item}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="选择网卡" v-bind="validateInfos.netcard">
        <div>
          <a-checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange">
            全选
          </a-checkbox>
        </div>
        <a-checkbox-group v-model:value="modelRef.netcard" :options="unslaves">
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="设定IP地址" v-bind="validateInfos.ipAddress">
        <a-select v-model:value="modelRef.ipAddress" placeholder="请选择IP地址">
          <a-select-option :value="ipAddress" v-for="ipAddress in modelRef.netcard" :key="'ipAddress_' + ipAddress"></a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  cid: {
    type: Number,
    default: 0
  }
})

const { visible, cid } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

import { Form } from 'ant-design-vue'
import { ref } from 'vue'

const useForm = Form.useForm

const modelRef = reactive({
  mode: 'Balance Round-Robin',
  netcard: ['Apple', 'Orange'],
  ipAddress: ''
})

const state = reactive({
  indeterminate: true,
  checkAll: false
})

const onCheckAllChange = e => {
  modelRef.netcard = e.target.checked ? unslaves.value : []
  state.indeterminate = false
}
watch(
  () => modelRef.netcard,
  val => {
    state.indeterminate = !!val.length && val.length < unslaves.value.length
    state.checkAll = val.length === unslaves.value.length
  }
)

const rulesRef = reactive({
  mode: [
    {
      required: true,
      message: '请选择模式'
    }
  ],
  netcard: [
    {
      required: true,
      validator: async (_rule, value) => {
        if (value.length < 2) {
          return Promise.reject('网卡绑定至少需要2块网卡!')
        }
        return Promise.resolve()
      },
      trigger: ['change', 'blur']
    }
  ],
  ipAddress: [
    {
      required: true,
      message: '请选择Ip地址'
    }
  ]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      netBoud() // 绑定
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}

// 模式
const modeList = ref([])
// 网卡
const unslaves = ref([])
// 获取网络绑定参数
let netBoudGetParams = () => {
  let parmas = {
    cid: cid.value
  }
  apiWs.netBoudGet(parmas).subscribe(resp => {
    modeList.value = resp.modelist
    unslaves.value = _.map(resp.unslaves, 'interface');
  })
}

// 绑定网卡
let netBoud = () => {
  let params = {
    slaves: modelRef.netcard,
    mode: modelRef.model,
    clone: modelRef.ipAddress
  }
  apiWs.netBoud(params).subscribe(resp => {
    onCancel()
  })
}
onMounted(() => {
  netBoudGetParams() // 加载绑定的参数
})
</script>

<style scoped>
</style>